<template>
  <div class="travel-guide-page">
    <!-- 页面头部 -->
    <section class="page-header bg-gradient-primary text-white py-5">
      <div class="container">
        <div class="row align-items-center">
          <div class="col-lg-8">
            <h1 class="display-5 fw-bold mb-3">旅行指南</h1>
            <p class="lead mb-4">专业的旅行攻略、贴士和建议，让您的旅程更加完美</p>
            <div class="header-stats d-flex flex-wrap gap-4">
              <div class="stat-item">
                <div class="h3 mb-1">500+</div>
                <small>详细攻略</small>
              </div>
              <div class="stat-item">
                <div class="h3 mb-1">10K+</div>
                <small>实用贴士</small>
              </div>
              <div class="stat-item">
                <div class="h3 mb-1">95%</div>
                <small>用户推荐</small>
              </div>
            </div>
          </div>
          <div class="col-lg-4 text-center">
            <i class="fas fa-compass display-1 opacity-75"></i>
          </div>
        </div>
      </div>
    </section>

    <!-- 指南分类导航 -->
    <section class="guide-categories py-4 bg-light sticky-top">
      <div class="container">
        <div class="row">
          <div class="col">
            <div class="d-flex flex-wrap gap-2 justify-content-center">
              <button v-for="category in guideCategories" 
                      :key="category.id"
                      class="btn btn-outline-primary"
                      :class="{ active: selectedCategory === category.id }"
                      @click="selectCategory(category.id)">
                <i :class="category.icon" class="me-2"></i>
                {{ category.name }}
              </button>
            </div>
          </div>
        </div>
      </div>
    </section>

    <div class="container mt-5">
      <div class="row">
        <!-- 主要内容 -->
        <div class="col-lg-8">
          <!-- 精选攻略 -->
          <section class="featured-guides mb-5">
            <div class="d-flex justify-content-between align-items-center mb-4">
              <h3 class="mb-0">精选旅行攻略</h3>
              <router-link to="/guides/all" class="btn btn-outline-primary">查看全部</router-link>
            </div>
            
            <div class="row">
              <div v-for="guide in featuredGuides" :key="guide.id" class="col-md-6 mb-4">
                <div class="card guide-card h-100">
                  <div class="position-relative">
                    <img :src="guide.image" class="card-img-top" :alt="guide.title" style="height: 200px; object-fit: cover;">
                    <div class="position-absolute top-0 end-0 m-2">
                      <span class="badge bg-success">
                        <i class="fas fa-star me-1"></i>{{ guide.rating }}
                      </span>
                    </div>
                    <div class="position-absolute top-0 start-0 m-2">
                      <span class="badge bg-primary">{{ guide.category }}</span>
                    </div>
                  </div>
                  <div class="card-body">
                    <h5 class="card-title">{{ guide.title }}</h5>
                    <p class="card-text text-muted">{{ guide.excerpt }}</p>
                    <div class="guide-meta d-flex justify-content-between align-items-center">
                      <div class="author-info d-flex align-items-center">
                        <img :src="guide.author.avatar" :alt="guide.author.name" class="rounded-circle me-2" style="width: 30px; height: 30px;">
                        <small class="text-muted">{{ guide.author.name }}</small>
                      </div>
                      <small class="text-muted">{{ guide.readTime }}</small>
                    </div>
                  </div>
                  <div class="card-footer bg-transparent">
                    <div class="d-flex justify-content-between align-items-center">
                      <div class="guide-stats">
                        <small class="text-muted me-3">
                          <i class="fas fa-eye me-1"></i>{{ guide.views }}
                        </small>
                        <small class="text-muted">
                          <i class="fas fa-heart me-1"></i>{{ guide.likes }}
                        </small>
                      </div>
                      <button class="btn btn-primary btn-sm" @click="readGuide(guide.id)">
                        阅读攻略
                      </button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </section>

          <!-- 实用工具 -->
          <section class="travel-tools mb-5">
            <h3 class="mb-4">旅行实用工具</h3>
            <div class="row">
              <div v-for="tool in travelTools" :key="tool.id" class="col-md-6 col-lg-4 mb-4">
                <div class="card tool-card h-100 text-center">
                  <div class="card-body">
                    <div class="tool-icon bg-primary rounded-circle d-inline-flex align-items-center justify-content-center text-white mb-3"
                         style="width: 60px; height: 60px;">
                      <i :class="tool.icon" class="fa-2x"></i>
                    </div>
                    <h5 class="card-title">{{ tool.name }}</h5>
                    <p class="card-text text-muted small">{{ tool.description }}</p>
                    <button class="btn btn-outline-primary btn-sm" @click="useTool(tool.id)">
                      使用工具
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </section>

          <!-- 常见问题 -->
          <section class="faq-section mb-5">
            <h3 class="mb-4">旅行常见问题</h3>
            <div class="accordion" id="travelFAQ">
              <div v-for="(faq, index) in faqs" :key="faq.id" class="accordion-item">
                <h2 class="accordion-header">
                  <button class="accordion-button" 
                          :class="{ collapsed: activeFaq !== index }"
                          type="button" 
                          @click="toggleFaq(index)">
                    {{ faq.question }}
                  </button>
                </h2>
                <div class="accordion-collapse collapse" 
                     :class="{ show: activeFaq === index }">
                  <div class="accordion-body">
                    {{ faq.answer }}
                  </div>
                </div>
              </div>
            </div>
          </section>
        </div>

        <!-- 侧边栏 -->
        <div class="col-lg-4">
          <!-- 热门标签 -->
          <div class="card mb-4">
            <div class="card-header bg-primary text-white">
              <h6 class="mb-0"><i class="fas fa-tags me-2"></i>热门标签</h6>
            </div>
            <div class="card-body">
              <div class="d-flex flex-wrap gap-2">
                <span v-for="tag in popularTags" 
                      :key="tag"
                      class="badge bg-light text-dark cursor-pointer"
                      @click="searchByTag(tag)">
                  {{ tag }}
                </span>
              </div>
            </div>
          </div>

          <!-- 行程规划工具 -->
          <div class="card mb-4">
            <div class="card-header bg-success text-white">
              <h6 class="mb-0"><i class="fas fa-route me-2"></i>行程规划</h6>
            </div>
            <div class="card-body">
              <div class="planning-steps">
                <div v-for="step in planningSteps" :key="step.id" class="step-item d-flex align-items-center mb-3">
                  <div class="step-number bg-primary rounded-circle d-flex align-items-center justify-content-center text-white me-3"
                       style="width: 30px; height: 30px;">
                    {{ step.step }}
                  </div>
                  <div>
                    <h6 class="mb-1 small">{{ step.title }}</h6>
                    <p class="text-muted small mb-0">{{ step.description }}</p>
                  </div>
                </div>
              </div>
              <button class="btn btn-success w-100 mt-3" @click="startPlanning">
                开始规划行程
              </button>
            </div>
          </div>

          <!-- 旅行贴士 -->
          <div class="card mb-4">
            <div class="card-header bg-warning text-dark">
              <h6 class="mb-0"><i class="fas fa-lightbulb me-2"></i>实用贴士</h6>
            </div>
            <div class="card-body">
              <div v-for="tip in travelTips" :key="tip.id" class="tip-item mb-3 pb-3 border-bottom">
                <h6 class="small fw-bold mb-2">{{ tip.title }}</h6>
                <p class="small text-muted mb-0">{{ tip.content }}</p>
              </div>
            </div>
          </div>

          <!-- 旅行日历 -->
          <div class="card">
            <div class="card-header bg-info text-white">
              <h6 class="mb-0"><i class="fas fa-calendar-alt me-2"></i>最佳旅行时间</h6>
            </div>
            <div class="card-body">
              <div v-for="season in bestSeasons" :key="season.period" class="season-item mb-3">
                <div class="d-flex justify-content-between align-items-center mb-1">
                  <strong class="small">{{ season.period }}</strong>
                  <span class="badge" :class="season.badgeClass">{{ season.recommendation }}</span>
                </div>
                <p class="small text-muted mb-0">{{ season.description }}</p>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 旅行故事 -->
      <section class="travel-stories mt-5">
        <h3 class="mb-4">旅行者故事</h3>
        <div class="row">
          <div v-for="story in travelStories" :key="story.id" class="col-md-6 col-lg-4 mb-4">
            <div class="card story-card h-100">
              <div class="card-body">
                <div class="d-flex align-items-center mb-3">
                  <img :src="story.author.avatar" :alt="story.author.name" class="rounded-circle me-3" style="width: 40px; height: 40px;">
                  <div>
                    <h6 class="mb-0">{{ story.author.name }}</h6>
                    <small class="text-muted">{{ story.destination }}</small>
                  </div>
                </div>
                <h5 class="card-title">{{ story.title }}</h5>
                <p class="card-text text-muted small">{{ story.excerpt }}</p>
                <div class="story-stats d-flex justify-content-between align-items-center">
                  <small class="text-muted">{{ story.date }}</small>
                  <small class="text-muted">
                    <i class="fas fa-heart me-1"></i>{{ story.likes }}
                  </small>
                </div>
              </div>
              <div class="card-footer bg-transparent">
                <button class="btn btn-outline-primary btn-sm w-100" @click="readStory(story.id)">
                  阅读故事
                </button>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
  </div>
</template>

<script>
export default {
  name: 'TravelGuide',
  data() {
    return {
      selectedCategory: 'all',
      activeFaq: 0,
      guideCategories: [
        { id: 'all', name: '全部指南', icon: 'fas fa-compass' },
        { id: 'planning', name: '行程规划', icon: 'fas fa-route' },
        { id: 'budget', name: '预算管理', icon: 'fas fa-money-bill-wave' },
        { id: 'packing', name: '行李打包', icon: 'fas fa-suitcase' },
        { id: 'safety', name: '安全指南', icon: 'fas fa-shield-alt' },
        { id: 'culture', name: '文化礼仪', icon: 'fas fa-hands-helping' },
        { id: 'food', name: '美食指南', icon: 'fas fa-utensils' }
      ],
      featuredGuides: [
        {
          id: 1,
          title: '欧洲自由行完全攻略',
          excerpt: '从签证到交通，从住宿到景点，全方位指导您的欧洲之旅',
          image: 'https://images.unsplash.com/photo-1467269204594-9661b134dd2b?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80',
          category: '行程规划',
          rating: 4.9,
          author: {
            name: '旅行达人张',
            avatar: 'https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-4.0.3&auto=format&fit=crop&w=100&q=80'
          },
          readTime: '15分钟阅读',
          views: '12.5K',
          likes: '892'
        }
        // 更多攻略数据...
      ],
      travelTools: [
        {
          id: 1,
          name: '预算计算器',
          description: '帮助您规划旅行预算',
          icon: 'fas fa-calculator'
        },
        {
          id: 2,
          name: '行李清单',
          description: '智能生成个性化打包清单',
          icon: 'fas fa-suitcase'
        },
        {
          id: 3,
          name: '行程生成器',
          description: '自动生成优化行程路线',
          icon: 'fas fa-route'
        },
        {
          id: 4,
          name: '汇率转换',
          description: '实时货币汇率计算',
          icon: 'fas fa-exchange-alt'
        },
        {
          id: 5,
          name: '天气查询',
          description: '目的地天气情况',
          icon: 'fas fa-cloud-sun'
        },
        {
          id: 6,
          name: '时区计算',
          description: '全球时区转换工具',
          icon: 'fas fa-clock'
        }
      ],
      faqs: [
        {
          id: 1,
          question: '如何申请申根签证？',
          answer: '申根签证申请需要准备护照、照片、行程单、机票预订证明、酒店预订证明、旅行保险等材料...'
        },
        {
          id: 2,
          question: '旅行保险有必要购买吗？',
          answer: '旅行保险非常重要，可以保障您在旅途中遇到的意外医疗、行李丢失、行程取消等风险...'
        }
        // 更多FAQ数据...
      ],
      popularTags: [
        '自由行', '跟团游', '背包客', '家庭游', '蜜月旅行', '商务旅行',
        '预算控制', '安全提示', '美食推荐', '购物指南', '摄影技巧'
      ],
      planningSteps: [
        {
          id: 1,
          step: 1,
          title: '确定目的地',
          description: '选择您想去的旅行地点'
        },
        {
          id: 2,
          step: 2,
          title: '制定预算',
          description: '规划旅行总花费'
        },
        {
          id: 3,
          step: 3,
          title: '预订机票酒店',
          description: '提前预订获得优惠'
        },
        {
          id: 4,
          step: 4,
          title: '规划行程',
          description: '安排每日活动'
        }
      ],
      travelTips: [
        {
          id: 1,
          title: '提前办理签证',
          content: '建议提前2-3个月开始准备签证材料，避免临时抱佛脚。'
        },
        {
          id: 2,
          title: '备份重要文件',
          content: '将护照、签证、保险单等重要文件拍照备份在手机和云端。'
        }
        // 更多贴士数据...
      ],
      bestSeasons: [
        {
          period: '春季 (3-5月)',
          recommendation: '推荐',
          badgeClass: 'bg-success',
          description: '气候宜人，花开季节，适合户外活动'
        },
        {
          period: '夏季 (6-8月)',
          recommendation: '热门',
          badgeClass: 'bg-warning',
          description: '旅游旺季，价格较高，注意防晒'
        }
        // 更多季节数据...
      ],
      travelStories: [
        {
          id: 1,
          title: '独自环游欧洲的90天',
          excerpt: '从巴黎到罗马，从柏林到巴塞罗那，一个人的欧洲冒险之旅...',
          author: {
            name: '冒险家李',
            avatar: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3&auto=format&fit=crop&w=100&q=80'
          },
          destination: '欧洲',
          date: '2024-01-10',
          likes: 156
        }
        // 更多故事数据...
      ]
    }
  },
  methods: {
    selectCategory(categoryId) {
      this.selectedCategory = categoryId
    },
    toggleFaq(index) {
      this.activeFaq = this.activeFaq === index ? null : index
    },
    searchByTag(tag) {
      console.log('搜索标签:', tag)
      // 实现标签搜索逻辑
    },
    startPlanning() {
      this.$router.push('/planning')
    },
    readGuide(guideId) {
      this.$router.push(`/guide/${guideId}`)
    },
    readStory(storyId) {
      this.$router.push(`/story/${storyId}`)
    },
    useTool(toolId) {
      // 根据工具ID执行相应操作
      const toolActions = {
        1: () => this.$router.push('/tools/budget'),
        2: () => this.$router.push('/tools/packing'),
        3: () => this.$router.push('/tools/itinerary'),
        4: () => this.$router.push('/tools/currency'),
        5: () => this.$router.push('/tools/weather'),
        6: () => this.$router.push('/tools/timezone')
      }
      
      if (toolActions[toolId]) {
        toolActions[toolId]()
      }
    }
  }
}
</script>

<style scoped>
.page-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.header-stats .stat-item {
  text-align: center;
}

.guide-categories {
  z-index: 1020;
}

.guide-card, .tool-card, .story-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
}

.guide-card:hover, .tool-card:hover, .story-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

.tool-icon {
  transition: transform 0.3s ease;
}

.tool-card:hover .tool-icon {
  transform: scale(1.1);
}

.author-info img {
  object-fit: cover;
}

.cursor-pointer {
  cursor: pointer;
}

.accordion-button:not(.collapsed) {
  background-color: #e7f1ff;
  color: #0c63e4;
}

.step-number {
  font-size: 0.8rem;
  font-weight: bold;
}

.tip-item:last-child {
  border-bottom: none !important;
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

.season-item:last-child {
  margin-bottom: 0 !important;
}
</style>